<script setup >
import { ref } from "vue"
import { addFeedBackApi } from "@/api/feedback";
import { ElMessage } from 'element-plus'
import {useRouter,useRoute} from 'vue-router'
import upImg from "@/components/upImg.vue";
import {useUserStore} from '@/stores/user'
const userStore = useUserStore()
const route = useRoute()
const router = useRouter()
const feedbackForm={
    user_id: '',
    content:'',
    contact_name:'',
    contact_phone:''
}
//校验规则
const feedbackFormRules = {
    content:[
        {
            require:true,
            message:'内容不能为空',
            trigger:'blur'
        },
    ],
    contact_name:[
        {
            require:true,
            message:'联系人不能为空',
            trigger:'blur'
        }
    ],
    contact_phone:[
        {
            require:true,
            message:'联系电话不能为空',
            trigger:'blur'
        }
    ]
    
}
const feedbackFormRef = ref(null)
 //强制刷新输入框视图 避免不能输入值
function changeValue(e) {
  this.$forceUpdate()
}
//返回上级url
const onBack = () => {
  router.back()
}
//重置表单内容
const reSet = ()=>{
  feedbackFormRef.value.resetFields();
}
//图片
const imgFile = ref(FileList)
const upFile = (imgFiles)=>{
  imgFile.value = imgFiles
}
//发布反馈
const onSubmit = async ()=>{
  if(feedbackForm.contact_name === ''){
    ElMessage.warning('联系人不能为空！')
    return
  }
  if(feedbackForm.contact_phone === ''){
    ElMessage.warning('联系电话不能为空！')
    return
  }
  if(feedbackForm.contact_phone.length !== 11){
    ElMessage.warning('号码电话格式不正确')
    return
  }
  if(feedbackForm.content === ''){
    ElMessage.warning('反馈内容不能为空！')
    return
  }
  if(imgFile.value.length === 0){
    ElMessage.warning('请上传图片')
    return
  }
  try{
    //获取表单元素
    feedbackForm.user_id = userStore.userInfo.id
    const resp = await addFeedBackApi(feedbackForm,imgFile.value)
    if(resp.data.code === 200){
      router.push('/mainBoard/feedback')
      ElMessage.success('发布成功!')
    }
  }catch(e){
    console.log(e)
    ElMessage.error(e)
  }
}
</script>

<template>
<div class="box">
    <div class="add">
        <!-- 导航栏 -->
        <el-page-header 
        title="返回"
        @back="onBack"
        :icon="ArrowLeftBold">
          <template #content>
            <div class="flex items-center">
              <el-avatar
                :size="32"
                class="mr-3"
                :src="userStore.userInfo.avatar"
              />
             <span 
             class="text-sm mr-2" 
             style="color: var(--el-text-color-regular)">
                发布反馈
              </span>
            </div>
          </template>
          <template #extra>
            <div class="flex items-center">
              <el-button
              @click="reSet"
              >重置</el-button>
              
            </div>
          </template>
        </el-page-header>
        <!-- 标题 内容 -->
        <el-form
        ref="feedbackFormRef"
        :rules="feedbackFormRules"
        :model="feedbackForm"
        >
          <el-form-item prop="contact_name">
            <el-input
            v-model="feedbackForm.contact_name"
            @input="changeValue"
            clearable
            placeholder="请输入联系人" >
            </el-input>
          </el-form-item>
          <el-form-item prop="content">
            <el-input 
            type="textarea"
            v-model="feedbackForm.content"
            @input="changeValue"
            clearable
            placeholder="请输入内容">
            </el-input>
          </el-form-item>
          <el-form-item prop="contact_phone">
            <el-input 
            v-model="feedbackForm.contact_phone"
            @input="changeValue"
            clearable
            placeholder="请输入您的联系方式">
            </el-input>
          </el-form-item>
          <!-- 图片上传 -->
          <upImg
          @onUpload="upFile"
          ></upImg>      
          <el-form-item>
            <el-button 
              @click="onSubmit"
              type="primary">发布</el-button>
          </el-form-item>
        </el-form>
    </div>
</div>
</template>

<style lang="scss" scoped>
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.add {
  width: 80%;
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.flex {
  display: flex;
  align-items: center;
}

.el-input__inner {
  font-size: 14px;
}

.el-button:hover {
  background-color: #3a8ee6;
}
</style>